<template>
  <div id="order" class="container">

    <h3 class="title"><span />友情链接管理</h3>
    <el-tabs id="tabcard" v-model="activeName" class="tabs" type="card" @tab-click="handleClick">
      <el-tab-pane label="导入链接" name="1" />
      <el-tab-pane label="导出链接" name="2" />
    </el-tabs>
    <div class="content">
      <el-button
        type="primary"
        class="orange"
        size="small"
        icon="el-icon-plus"
        style="margin-bottom:15px;margin-left:15px"
        @click="goAdd"
      >添加站点友情链接</el-button>
      <!-- <el-button
        type="primary"
        size="small"
        icon="el-icon-document-copy"
        style="margin-bottom:15px"
        @click="goCopy"
      >复制其他站点友链</el-button> -->
      <el-button v-if="activeName == 1" size="small">导入总链接数 <b>{{ count }}<strong :class="change>0?'el-icon-arrow-up':'el-icon-arrow-down' " /></b> </el-button>
      <el-button v-if="activeName == 2" size="small">导出总链接数 <b>{{ count }}<strong :class="change>0?'el-icon-arrow-up':'el-icon-arrow-down' " /></b> </el-button>
      <el-button size="small"><span>{{ month }}月份变化量 </span> <b>{{ change }}<strong :class="change>0?'el-icon-arrow-up':'el-icon-arrow-down' " /></b>
      </el-button>
      <!-- <el-button type="danger" size="small" icon="el-icon-delete" @click="Batchdelete">批量删除</el-button> -->
      <!-- <div><span>数量：</span>{{ count }}</div>
      <div><span>月变化量：</span>{{ change }}</div> -->
      <BouncedDialog title="复制站点友链" :dialog-show.sync="dialogShow2" :width="50" class="keyword">
        <el-form ref="addForm2" :model="addForm2" :rules="rules2" inline class="addForm" label-width="80px">
          <el-form-item label="选择站点" prop="website_id">
            <el-select v-model="addForm2.website_id" disabled placeholder="请选择站点">
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.domain"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="复制站点" prop="copy_site_id">
            <el-select v-model="addForm2.copy_site_id" placeholder="请选择要复制的站点" @change="chooseKeywords">
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.domain"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <div class="btn">
            <el-button @click="dialogShow2 = false">取 消</el-button>
            <el-button type="primary" @click="submitCopy()">确 定</el-button>
          </div>
        </el-form>
      </BouncedDialog>
      <el-table
        :data="friendLinkData"
        border
        stripe
        :header-cell-style="{'text-align':'center'}"
        :cell-style="{'text-align':'center'}"
        @selection-change="handleSelectionChange"
      >
        <!-- <el-table-column type="selection" width="55" /> -->
        <el-table-column label="ID" prop="id" width="75" />
        <el-table-column label="链接类型" prop="url_type" width="120px">
          <template slot-scope="scope">
            <span v-if="scope.row.url_type == 1">友情交换</span>
            <span v-if="scope.row.url_type == 2">链接出售</span>
            <span v-if="scope.row.url_type == 3">链接购买</span>
            <span v-if="scope.row.url_type == 4">版权链接</span>
          </template>
        </el-table-column>
        <el-table-column label="网站类型" prop="site_type" width="120px">
          <template slot-scope="scope">
            <span v-if="scope.row.site_type == 1">企业站</span>
            <span v-if="scope.row.site_type == 2">新闻站</span>
            <span v-if="scope.row.site_type == 3">博客站</span>
            <span v-if="scope.row.site_type == 4">论坛站</span>
            <span v-if="scope.row.site_type == 5">门户站</span>
          </template>
        </el-table-column>
        <el-table-column label="链接名称" prop="name" show-overflow-tooltip />
        <el-table-column label="地址" prop="url" show-overflow-tooltip />
        <el-table-column label="打开方式" prop="target" width="120px">
          <template slot-scope="scope">
            <span v-if="scope.row.target == 1">本页面打开</span>
            <span v-if="scope.row.target == 2">新页面打开</span>
          </template>
        </el-table-column>
        <el-table-column v-if="activeName == '2'" label="排序" prop="sort" width="80px" />
        <el-table-column label="百度权重" prop="baidu_weight" width="80px" />
        <el-table-column :label="activeName=='2'?'反链位置':'链接位置'" prop="position" />
        <el-table-column label="检查记录" prop="check_log" width="100px">
          <template slot-scope="scope">
            <span v-if="scope.row.check_log ==1">存在</span>
            <span v-if="scope.row.check_log ==2">不存在</span>
          </template>
        </el-table-column>
        <el-table-column label="添加人" prop="add_person" />
        <el-table-column label="操作" width="210px" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" class="orange" type="primary" @click="check(scope.row)">查看</el-button>
            <el-button class="edit" size="mini" @click="goedit(scope.row)">编辑</el-button>
            <el-button class="dele" size="mini" @click="del(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="page.currentPage"
        :page-sizes="page.pageSizes"
        :page-size="page.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        :hide-on-single-page="page.total<page.size?true:false"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script>
import linkApi from '@/api/link.js'
import websiteApi from '@/api/website.js'
export default {
  data() {
    return {
      month: '',
      activeName: '',
      friendLinkData: [], // 友情链接列表
      dialogShow: false,
      options: [], // 站点下拉选项
      addForm: {
        id: '',
        name: '',
        website_id: '',
        url: '',
        sort: '',
        target: ''
      },
      rules: {
        website_id: [
          { required: 'true', message: '请选择站点', trigger: 'change' }
        ],
        name: [
          { required: 'true', message: '请输入友情链接名称', trigger: 'blur' }
        ],
        url: [
          { required: 'true', message: '请输入友情链接链接', trigger: 'blur' }
        ],
        sort: [
          { required: 'true', message: '请输入排序', trigger: 'blur' }
        ],
        target: [
          { required: 'true', message: '请选择打开方式', trigger: 'change' }
        ]
      },
      dialogShow2: false,
      addForm2: {
        website_id: '',
        copy_site_id: ''
      },
      rules2: {
        copy_site_id: [
          { required: 'true', message: '请选择要复制的站点', trigger: 'change' }
        ]
        // website_id: [
        //   { required: 'true', message: '请选择站点', trigger: 'change' }
        // ]
      },
      searchForm: {
        title: '',
        website_id: ''
      },
      page: {
        total: 0,
        currentPage: 1,
        size: 10,
        pageSizes: [10, 20, 30, 40]
      }, // 分页器
      val: {

      },
      id: '',
      count: '',
      change: '',
      type: ''
    }
  },
  computed: {
    siteId1() {
      return this.$store.getters.siteId
    }
  },
  watch: {
    siteId1(val, value) {
      this.website_id = val

      // this.$router.push({ name: 'friendLink' })
      this.getList()
    }
  },
  created() {
    if (this.$route.query.type) {
      this.activeName = this.$route.query.type
    } else {
      this.activeName = '1'
    }
    this.getMounth()
    this.getWebsiteList()
    this.website_id = this.$store.getters.siteId
    if (this.website_id) {
      this.getList()
    }
  },
  mounted() {
    // this.getTikets()
  },
  updated() {

  },
  methods: {
    // 获取当前月份
    getMounth() {
      var today = new Date()
      this.month = today.getMonth() + 1
    },
    handleClick(val, event) {
      this.activeName = val.name
      this.getList()
    },
    // 全选
    handleSelectionChange(val) {

    },
    // 批量删除
    Batchdelete() {

    },
    handlechange() {},
    // 获取站点列表
    getWebsiteList() {
      websiteApi.websiteList().then(res => {
        this.options = res.data
        this.options2 = res.data
        this.searchForm.website_id = res.data[0].id
      })
    },
    // 复制其他站点友情链接
    goCopy() {
      this.addForm2.website_id = this.website_id
      this.addForm2.copy_site_id = ''
      this.dialogShow2 = true
    },
    submitCopy() {
      this.$refs.addForm2.validate((valid) => {
        if (valid) {
          linkApi.linkCopy({ ...this.addForm2 }).then(res => {
            if (res.code == 0) {
              this.$message.success(res.msg)
              this.dialogShow2 = false
              this.getList()
            } else {
              this.$message.error(res.msg)
            }
          })
        }
      })
    },

    // 编辑--多选友情链接
    chooseKeywords(val) {

    },
    // 新增
    goAdd() {
      this.$router.push({ name: 'addLink', query: { type: this.activeName, siteId: this.website_id }})
    },
    // 编辑
    goedit(row) {
      this.$router.push({ name: 'updateLink', query: { type: this.activeName, siteId: this.website_id, id: row.id }})
    },
    // 查看
    check(row) {
      this.$router.push({ name: 'linkInfo', query: { id: row.id, siteId: this.website_id, type: this.activeName }})
    },
    // 删除
    del(row) {
      this.$confirm('此操作将永久删除该友情链接, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const val = {
          id: row.id,
          website_id: this.website_id,
          type: this.activeName
        }
        linkApi.linkDelete(val).then(res => {
          if (res.code == 0) {
            this.$message.success(res.msg)
            this.getList()
          } else {
            this.$message.error(res.msg)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 查询
    search(val) {
      this.searchForm.name = val.name
      this.searchForm.website_id = val.website_id
      this.getList()
    },
    // 列表
    getList() {
      this.val.page = this.page.currentPage
      this.val.limit = this.page.size
      this.val.website_id = this.website_id
      this.val.type = this.activeName

      linkApi.linkList(this.val).then(res => {
        if (res.code == 0) {
          this.friendLinkData = res.data
          this.count = res.count
          this.change = res.change
          this.keywordIds = []
          res.data.forEach(el => {
            this.keywordIds.push(el.keyword_id)
          })
        } else {
          this.$message.error(res.msg)
        }

        // this.page.total = res.count
      })
    },
    // 分页规格改变
    handleSizeChange(val) {
      this.page.size = val
      this.page.currentPage = 1
      this.getList()
    },
    // 分页点击
    handleCurrentChange(val) {
      this.page.currentPage = val
      this.getList()
    }

  }
}
</script>
<style lang='scss'>
#order{
  .keyword{
    .el-select{
        width: 100%;
    }
  }
  .addForm .el-form-item__content{
      width: calc(100% - 80px);
    }
}
</style>
<style scoped lang='scss'>
.content{
  background-color: #fff;
  .el-icon-arrow-up{
    font-weight: bolder;
    color: #f84311;
    margin-left: 5px;
  }
  .el-icon-arrow-down{
    font-weight: bolder;
    color: #1fc009;
    margin-left: 5px;
  }
}
  .el-table{
    margin-bottom: 20px;
  }

</style>
